<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七海登录系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input {
            outline: 0;
            opacity: .7;
        }
        html{
            background-image: url(../static/images/Snipaste_2021-08-12_10-42-14.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .box {
            margin: 100px auto;
            width: 778px;
            height: 395px;
        }

        .qihai {
            text-align: center;
            opacity: .9;
        }

        .fontcolor {
            padding-top: 100px;
        }

        #username {
            width: 200px;
            height: 30px;
            margin-top: 20px;
        }

        #password {
            width: 200px;
            height: 30px;
            margin-top: 20px;
        }

        #loginBtn {
            border: 0;
            outline: 0;
            border-radius: 8px;
            width: 272px;
            height: 40px;
            margin-top: 20px;
            background-color: blue;
            color: white;
            cursor: pointer;
        }
        #registerBtn {
            border: 0;
            outline: 0;
            border-radius: 8px;
            width: 272px;
            height: 40px;
            margin-top: 20px;
            background-color: blue;
            color: white;
            cursor: pointer;
        }


        /* .zc{
            border: 0;
            outline: 0;
            border-radius: 8px;
            width: 272px;
            height: 40px;
            margin-left: 664px;
            margin-top: 20px;
            background-color: blue;
            color: white;
            cursor: pointer;
        } */
        #message {
            text-align: center;
            color:tomato;
        }

        #error {
            text-align: center;
            color: tomato;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1 class="qihai fontcolor">欢迎登录七海博客</h1>
        <p class="qihai" class="fontcolor">
            用户名： <input type="text" id="username" placeholder="请输入用户名">
        </p>
        <div id="message">
        </div>
        <p class="qihai" class="fontcolor">
            密&nbsp;&nbsp; 码： <input type="password" id="password" placeholder="请输入密码">
        </p>
        <div id="error">
        </div>
        <p class="qihai">
            <button id="loginBtn">登录</button>
        </p>
        <p class="qihai">
           <button id="registerBtn" onclick="location.href='/register'">点击注册</button>
        </p>
    </div>

</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<script>
    let userEle = document.getElementById('username');
    let pwdEle = document.getElementById('password');
    let loginBtnEle = document.getElementById('loginBtn');
    let msgEle = document.getElementById('message');
    let errorEle = document.getElementById('error');
    loginBtnEle.onclick = function () {
        //用户名和密码
        let username = userEle.value;
        let password = pwdEle.value;
        //校验
        let usernameReg = /^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){3,}$/
        if (!usernameReg.test(username)) {
            msgEle.innerHTML = '<span class="error">请输入用户名，用户名不能少于3位数</span>'
            return false;
        }
        let pwdReg = /^.{6,}$/;
        if (!pwdReg.test(password)) {
            errorEle.innerHTML = '<span class="error">请输入密码，密码不能少于6位</span>'
            return false;
        }

        msgEle.innerHTML = '';
        errorEle.innerHTML = '';
        // 防止用户频繁按钮，对服务器造成一定的压力
        loginBtnEle.setAttribute('disabled', 'disabled')
        loginBtnEle.innerText = "登录中.."
        //4. 校验成功发送ajax请求，到服务器进行验证匹配
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let data = JSON.parse(this.responseText)
                loginBtnEle.removeAttribute('disabled')
                loginBtnEle.innerText = "登录"
                let { code, message } = data;
                if (code == '20000') {
                    layer.msg('登录成功')
                    location.href = "/";
                } else {
                    alert('用户名或密码失败')
                }
            }
        }
        xhr.open('post', '/ajaxlogin', true)
        // post要设置请求头content-type,模拟post表单来传递数据
        xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');
        username = encodeURIComponent(username);
        password = encodeURIComponent(password);
        let formdata = `username=${username}&password=${password}`;
        xhr.send(formdata)
    }

</script>

</html>